<template>
	<view class="notice-list">
		<u-navbar
			title="通知"
			autoBack
			:placeholder="true"
		></u-navbar>
		<view class="content">
			<view class="content__list">
				<view class="list__item" v-for="item in noticeList" :key="item.id">
					<view class="list__item__time">
						{{ item.time }}
					</view>
					<view class="list__item__wrap">
						<view class="list__item__title">
							{{ item.title }}
						</view>
						<view class="list__item__image">
							<image :src="minioUrl + item.image" mode="widthFix"></image>
						</view>
						<view class="list__item__describe">
							<u--text :text="item.describe" :lines="2" color="#606266"></u--text>
						</view>
						<view class="list__item__more" @click="searchDetail(item.id)">
							<text>查看详情</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {getCurrentInstance, onMounted, ref} from 'vue'
	import type { notice } from '@/types/notice.d.ts'
	
	const { proxy }: any = getCurrentInstance()
	const minioUrl = proxy.$minioUrl
	
	const noticeList = ref<notice[]>([
		{
			id: 1,
			title: '关于暴雨导致包裹派送延迟通知',
			describe: '近期中国部分地区大范围强降雨，造成多个区域严重自然灾害，部分地区交通道路完全中断。',
			image: '/notices/notice1.jpg',
			time: '2020-07-28 17:31'
		}
	])
	
	const searchDetail = (id) => {
		uni.navigateTo({
		  url: '/notices/notice_detail/notice_detail?id=' + id
		})
	}
	
	onMounted(()=>{
		console.log(noticeList.value)
	})
</script>

<style lang="scss">
@import "style.scss"
</style>
